// 获取内容容器元素
// 获取内容区域的DOM元素
let contentBox = document.querySelector(".content")
// 获取导航链接的DOM元素集合
let now=document.querySelectorAll(".nav-link");
// 如果当前路径是首页，则添加active类到第一个导航链接
if(location.pathname=='/'){
    now[0].classList.add("active");
}
// 发送GET请求获取所有文章数据
fetch("/getEmotionArticle")
.then((res)=>{
    // 将响应数据转换为JSON格式
    return res.json()
})
.then((data)=>{
    // 遍历每篇文章数据
    data.forEach((item) => {
       // 创建卡片元素
/**
 * 创建一个新的链接元素（<a>），并将其赋值给变量card
 * 这个链接元素将用于显示某个卡片项目
 */
       var card = document.createElement("a");  // 创建一个新的<a>元素并赋值给card变量
// 设置元素的data-id属性值为当前项的id
       card.setAttribute("data-id",item.id);
       // 设置卡片链接地址
       card.setAttribute("href",
        "/page?wd="+card.getAttribute("data-id"));
       // 添加卡片样式类
       card.className = "card";
       // 创建标题元素并设置内容
       var p1 = document.createElement("p");
       // 添加标题样式类
       p1.className="card-title";
       // 设置标题文本内容
       p1.innerHTML = item.title;
       // 创建内容元素并截取前20个字符
       var p2 = document.createElement("p");
       // 添加内容样式类
       p2.className="card-content";
       // 截取内容前20个字符并添加省略号
       p2.innerHTML = item.content.slice(0,40)+"......";
       // 创建信息容器
       var div = document.createElement("div");
       // 添加信息容器样式类
       div.className = "card-info";
       // 创建作者、点赞和收藏的span元素
       var span1=document.createElement("span");
       var span2=document.createElement("span");
       var span3=document.createElement("span");
       // 设置各span元素的文本内容和样式
       span1.innerText=item.author;  // 设置作者文本
       span2.innerText=item.commend;  // 设置点赞数文本
       span3.innerText=item.fav;  // 设置收藏数文本
       // 添加各span元素的样式类
       span1.className="card-author";
       span2.className="card-commend";
       span3.className="card-fav";
       // 将span元素添加到信息容器中
       div.appendChild(span1);
       div.appendChild(span2);
       div.appendChild(span3);
       // 将标题、内容和信息容器添加到卡片中
       card.appendChild(p1);
       card.appendChild(p2);
       card.appendChild(div);
       // 将卡片添加到内容容器中
       contentBox.appendChild(card);

    });
})
